<!--  -->
<template>
  <el-dialog
    :center="true"
    :title="is_add ? '新增' : '编辑'"
    :visible="dialogformvisible_edit"
    :before-close="handleClose_edit"
    :modal-append-to-body="false"
  >
    <!-- 与添加屏幕信息界面一致 -->
    <el-form
      :model="group_info"
      label-position="left"
      ref="group_info_Form"
      :rules="rules"
    >
      <!-- <el-form-item label="ID"> 
          id
      </el-form-item> -->
      <el-form-item label="组名" label-width="80px" prop="name">
        <el-input
          v-model.trim="group_info.name"
          autocomplete="off"
          placeholder="分组名称"
          maxlength="40"
        ></el-input>
      </el-form-item>
      <el-form-item label="组id" label-width="80px" prop="group_id">
        <el-input
          :value="is_add ? '': group_info.group_id"
          autocomplete="off"
          disabled 
        ></el-input>
        <!-- <el-select v-model="group_info.type" placeholder="请选择">
          <el-option label="同步" value="sync"></el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="宽度" label-width="80px" prop="width">
        <el-input
          v-model.number="group_info.width"
          :disabled="!is_add"
          autocomplete="off"
          placeholder="屏的宽度,单位像素"
        ></el-input>
      </el-form-item>
      <el-form-item label="高度" label-width="80px" prop="height">
        <el-input
          v-model.number="group_info.height"
          :disabled="!is_add"
          autocomplete="off"
          placeholder="屏的高度,单位像素"
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:dialogformvisible_edit', false)"
        >取 消</el-button
      >
      <el-button type="primary" @click="saveGroup">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import axios from "axios";
export default {
  name: "Group_edit_dialog",
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请输入组名称", trigger: "blur" },
          { min: 3, max: 50, message: "长度在3到50个字符", trigger: "blur" },
        ],

        // type: [
        //   { required: true, message: "请输入组名称", trigger: "blur" },
        //   { min: 3, max: 50, message: "长度在3到50个字符", trigger: "blur" },
        // ],
        width: [
          { required: true, message: "请输入屏幕位置", trigger: "blur" },
          //   { min: 100, max: 1000, message: "长度在3到4个字符", trigger: "blur" },
          { type: "number", message: "必须为数字值" },
        ],
        height: [
          { required: true, message: "请输入屏幕位置", trigger: "blur" },
          //   { min: 2, max: 3, message: "长度在2到3个字符", trigger: "blur" },
          { type: "number", message: "必须为数字值" },
        ],
      },

      dialogformvisible_edit_data: this.dialogformvisible_edit,
    };
  },
  props: ["dialogformvisible_edit", "is_add", "group_info"],
  methods: {
    saveGroup() {
      this.$refs.group_info_Form.validate(async (valid) => {
        if (valid) {
          this.group_info.width = +this.group_info.width;
          if (this.group_info.width < 100 || this.group_info.width > 2000) {
            this.$message.error("宽度需在100~2000之间");
            return;
          }

          this.group_info.height = +this.group_info.height;
          if (this.group_info.height < 32 || this.group_info.height > 1000) {
            this.$message.error("宽度需在32~1000之间");
            return;
          }

          if (this.is_add) {
            //axios.post add screen
            let ret = await this.$http.post("groups", this.group_info);
            console.log(ret);
            let { action, result } = ret.data.data;
            console.log(action, result);
            if (result == "ok") this.$message.success("添加分组成功");
            else this.$message.error("添加分组失败");
          } else {
            //axios.put  update screen by id
            console.log(this.group_info);
            let ret = await this.$http.put(
              `groups/${this.group_info.group_id}`,
              this.group_info
            );
            console.log(ret);
            let { action, result } = ret.data.data;
            console.log(action, result);
            if (result == "ok") this.$message.success("修改屏幕成功");
            else this.$message.error("修改屏幕失败");
          } 

          this.$emit("update:dialogformvisible_edit", false);
        } else {
          this.$message.error("数据填写有错误");
          // return false; //?????
        }
      });
    },
    handleClose_edit(done) {
      //console.log('done',done);
      this.$confirm("确认关闭？")
        .then((_) => {
          //done(); //done 干啥的
          this.$emit("update:dialogformvisible_edit", false);
        })
        .catch((_) => {});
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>